<template>
	<view class="content">
		<u-navbar :is-mp-wx="true" :border-bottom="false">
			<template v-slot:right>
				<view class="u-flex u-m-r-40">
					<u-image class="u-m-r-28" v-if="data.utype == 2" src="/pages/pagesHome/static/report.png" width="42"
						height="40" @click="toReport(data.id)" mode="heightFix"></u-image>
					<u-image src="/pages/pagesHome/static/share.png" width="42" height="42"
						@click="$u.throttle(shareClick,1000)" mode="widthFix"></u-image>
				</view>
			</template>
		</u-navbar>
		<view class="content_main" :class="{'u-stop-slip':data.isShare}"
			v-if="data.jobInfo && data.jobInfo.base_info && data.jobInfo.com_info && data.jobInfo.contact_info">
			<!-- 职位信息 -->
			<view class="u-border-bottom u-p-t-32 u-p-b-40">
				<view class="u-flex u-row-between">
					<view class="u-font-32 u-font-weight u-white-60">
						{{data.jobInfo.base_info.jobname}}
					</view>
					<view class="u-font-28" style="color: #00D075;">
						{{data.jobInfo.base_info.wage_text}}
					</view>
				</view>
				<view class="u-flex u-row-between u-m-t-36">
					<view class="u-flex u-font-26" style="color: #343434;">
						<view class="u-flex">
							<u-image class="u-m-r-10" src="/pages/pagesHome/static/address.jpg" width="30"
								mode="widthFix"></u-image>
							{{data.jobInfo.base_info.district_text}}
						</view>
						<view class="u-flex u-m-l-20">
							<u-image src="/pages/pagesHome/static/experience.jpg" mode="widthFix" width="40"></u-image>
							<view class="u-m-l-10">
								{{data.jobInfo.base_info.experience_text}}
							</view>
						</view>
						<view class="u-flex u-m-l-20">
							<u-image src="/pages/pagesHome/static/education.jpg" mode="widthFix" width="40"></u-image>
							<view class="u-m-l-10">
								{{data.jobInfo.base_info.education_text}}
							</view>
						</view>
					</view>
					<view class="u-font-24" style="color: #8a8888;">
						{{data.jobInfo.base_info.refreshtime}}
					</view>
				</view>
			</view>
			<!-- 职位描述 职位福利 -->
			<view class="u-border-bottom u-p-t-56 u-p-b-20">
				<view>
					<view class="u-font-weight u-font-32">职位描述</view>
					<view class="u-font-13 u-m-t-22" style="color: #343434;">
						<view class="u-flex">
							<view class="u-flex-1">
								性质：{{data.jobInfo.base_info.nature_text}}
							</view>
							<view class="u-flex-1">
								人数：{{data.jobInfo.base_info.amount_text}}
							</view>
						</view>
						<view class="u-flex-1 u-m-t-20">
							年龄：{{data.jobInfo.base_info.age_text}}
						</view>
					</view>
					<view class="u-m-t-36 u-font-12" style="color: #343434;">
						<view class="u-m-b-10">
							岗位职责：
						</view>
						<rich-text :nodes="data.jobInfo.base_info.content"></rich-text>
					</view>
				</view>
				<view class="u-m-t-68" v-if="data.jobInfo.base_info.tag_text_arr.length > 0">
					<view class="u-font-weight u-font-32 u-m-b-20">职位福利</view>
					<u-scroll-list :indicator="false">
						<view v-for="(item, index) in data.jobInfo.base_info.tag_text_arr" :key="index">
							<view class="content_main_tag">{{item}}</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<!-- 联系方式  职位动态-->
			<view class="u-border-bottom u-p-b-40">
				<view class="u-m-t-32">
					<view class="u-font-weight u-font-32">联系方式</view>
					<view class="u-flex content_main_contact" v-if="data.jobInfo.has_apply == 0 && data.utype == 2">
						<u-image src="/pages/pagesHome/static/resume.png" width="74" height="78"></u-image>
						<view class="u-m-t-10">您尚未投递简历，<text @click="data.isApply = true">点击投递</text>
							后可查看企业联系方式</view>
					</view>
					<view class="u-m-t-20 u-font-14" v-else style="color: #8a8888;">
						<view class="u-m-b-20">
							联系人：{{data.jobInfo.contact_info.contact}}
						</view>
						<view class="u-m-b-20">
							联系手机：{{data.jobInfo.contact_info.mobile}}
						</view>
						<view class="u-m-b-20" v-if="data.jobInfo.contact_info.weixin">
							联系微信：{{data.jobInfo.contact_info.weixin}}
						</view>
					</view>
				</view>

				<view class="u-m-t-54">
					<view class="u-font-weight u-font-32">职位动态</view>
					<view class="u-flex u-row-around u-text-center u-m-t-40">
						<view>
							<view class="u-font-32" style="color: #F9B34E">{{data.jobInfo.watch_percent}}</view>
							<view class="u-font-13 u-m-t-12" style="color: #8a8888;">企业简历查看率</view>
						</view>
						<view>
							<view class="u-font-32" style="color: #F9B34E">{{data.jobInfo.last_login_time}}</view>
							<view class="u-font-13 u-m-t-12" style="color: #8a8888;">企业最近登录</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 公司信息 -->
			<view class="u-border-bottom u-p-t-46 u-p-b-60">
				<view class="u-flex u-row-between u-m-b-56" @click="toCompanyDetail(data.jobInfo.com_info.id)">
					<view class="u-flex">
						<u-image :src="data.jobInfo.com_info.logo_src" width="86" height="86"></u-image>
						<view class="u-m-l-20">
							<view class="u-font-28 u-font-weight u-white-60 u-line-1">
								{{data.jobInfo.com_info.companyname}}
							</view>
							<view class="u-font-13 u-m-t-10 u-flex" style="color: #8a8888;">
								热招：
								<view class="u-line-1 u-m-r-10"
									:style="[{width: data.jobInfo.com_info.first_jobname.length > 10 ? '100rpx' : ''}]">
									{{data.jobInfo.com_info.first_jobname}}
								</view>
								等
								<text style="color:#F9B34E;">{{data.jobInfo.com_info.jobnum}}</text>
								个职位
							</view>
						</view>
					</view>

					<u-icon name="arrow-right" color="#bbbbbb" size="38"></u-icon>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<map style="width: 100%; height: 146px;" :enable-zoom="false" :enable-scroll="false"
					:latitude="data.jobInfo.base_info.map_lat" :longitude="data.jobInfo.base_info.map_lng"
					:markers="markers" @click="openLocation">
				</map>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view @click.stop.prevent="openLocation">
					<u-a-map :lng="data.jobInfo.base_info.map_lng" :lat="data.jobInfo.base_info.map_lat"></u-a-map>
				</view>
				<!-- #endif -->
			</view>
			<!-- 安全提示 -->
			<view class="u-m-t-60 u-p-l-20 u-p-r-20" v-if="data.utype == 2">
				<view class="u-flex">
					<u-image src="/pages/pagesHome/static/safetyTips.png" width="30" height="34"
						mode="heightFix"></u-image>
					<view class="u-m-l-10 u-font-13 u-font-weight">安全提示</view>
				</view>
				<view class="u-font-12 u-m-t-10" style="color: #8a8888;">
					严禁用人单位做出任何损害求职者合法权益的违法违规行
					为，包括但不限于扣押求职者证件、收取求职者财务、向求职
					者集资、让求职者入股、诱导求职者异地入职，异地参与培训
					等，您一旦发现此类行为，
					<text style="color: #00D075;text-decoration: underline;" @click="toReport(data.id)">请立即举报</text>
				</view>
			</view>
			<!-- 相关职位 -->
			<u-divider v-if="data.utype == 2" margin-top="30" margin-bottom="20">这还有一些相似职位</u-divider>
			<!-- 职位列表 -->
			<view v-if="data.utype == 2">
				<view class="content_main_ls u-border-bottom" v-for="item in data.jobInfo.similar" :key="item.id"
					@click="toJobDetail(item.id)">
					<view class="u-flex u-row-between">
						<view class="content_main_ls--tit">
							{{item.jobname}}
						</view>
						<view class="content_main_ls--salary">
							{{item.wage_text}}
						</view>
					</view>
					<view class="u-flex u-row-left u-m-t-10 content_main_ls_item">
						<text>{{item.education_text}}</text>
						<u-line margin="0 20rpx" :hair-line="false" length="25rpx" direction="col"
							color="#867F7F"></u-line>
						<text>{{item.company_scale_text}}</text>
						<u-line margin="0 20rpx" :hair-line="false" length="25rpx" direction="col"
							color="#867F7F"></u-line>
						<text>{{item.district_text}}</text>
					</view>
					<view class="u-flex u-m-t-24 content_main_ls--tags">
						<view v-for="(tag,index) in item.tag" :key="index">
							{{tag}}
						</view>
					</view>
					<view class="u-flex u-row-between">
						<view class="u-flex content_main_ls--companyname">
							<u-image class="u-m-r-20" :src="item.company_logo" shape="circle" width="50"
								height="50"></u-image>
							<view class="u-line-1 u-white-50">
								{{item.companyname}}
							</view>
						</view>
						<view class="content_main_ls--refreshtime">
							{{item.refreshtime}}
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="content_btm u-flex u-row-between" v-if="data.utype == 2">
			<view class="u-flex u-row-around u-text-center u-flex-1 u-m-r-80">
				<view class="content_btm--phone" @click="callPhone(data.jobInfo.has_apply)">
					<u-image src="/pages/pagesHome/static/phone.png" width="42" height="42" mode="widthFix"></u-image>
					<view class="u-m-t-4">电话</view>
				</view>
				<view class="content_btm--collect" @click="$u.throttle(collectClick, 1000)">
					<u-image v-show="data.jobInfo.has_fav == 0" src="/pages/pagesHome/static/collect.png" width="42"
						height="42" mode="widthFix"></u-image>
					<u-image v-show="data.jobInfo.has_fav == 1" src="/pages/pagesHome/static/collect_1.png" width="42"
						height="42" mode="widthFix"></u-image>

					<view class="u-m-t-4">收藏</view>
				</view>
			</view>
			<view class="u-flex ">
				<u-button class="u-m-r-28" hover-class="none" :ripple="false" :custom-style="data.messageStyle"
					:hair-line="false" @click="$u.throttle(onlineChat, 1000)">在线聊</u-button>
				<u-button hover-class="none" :ripple="false" :custom-style="data.resumeStyle" :hair-line="false"
					@click="isApplyClick">{{data.jobInfo.has_apply == 1 ? '已投递' : '投递简历'}}</u-button>
			</view>
		</view>


		<!-- 分享弹窗 -->
		<u-share :show="data.isShare" :src="data.src" @change="$u.throttle(shareClick,1000)"
			@close="data.isShare = false"></u-share>
		<!-- 投递弹窗 -->
		<u-modal v-model="data.isApply" title="系统提示" content="确定向对方投递简历吗？" show-cancel-button
			@cancel="data.isApply =false" @confirm="$u.throttle(submitResume, 1000)"></u-modal>
		<!-- 聊天检测弹窗 -->
		<u-modal v-model="data.imShowstart" title="系统提示" :content="data.imStartContent" show-cancel-button
			:confirm-text="data.imStartConfirmText" @cancel="data.imShowstart =false"
			@confirm="$u.throttle(imStartConfirm, 1000)"></u-modal>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		computed,
		nextTick,
		reactive,
		watch,
	} from "vue";
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '/stores/userInfo.js'
	import {
		useUserIm
	} from '/stores/userIm.js'
	const {
		isLogin
	} = storeToRefs(useUserStore())
	const IM = useUserIm()
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		id: '',
		jobInfo: {
			has_fav: 0
		},
		messageStyle: {
			backgroundColor: '#FDECDD',
			color: '#EC5700',
			borderColor: '#EC5700',
			fontSize: '28rpx',
			border: 'none'
		},
		resumeStyle: {
			backgroundColor: '#00D075',
			color: '#fff',
			fontSize: '28rpx',
			border: 'none'
		},
		activeStyle: {
			color: '#101010',
			fontSize: "24rpx",
			border: "1px solid #d5d1d1",
			marginRight: "18rpx",
			paddingLeft: "30rpx",
			textAlign: "center",
			height: "84rpx"
		},
		// 显示海报
		isShare: false,
		// 海报图片地址
		src: '',
		// 投递简历弹窗
		isApply: false,
		// 聊天检测
		imShowstart: false,
		imStartConfirmText: '',
		imStartContent: ''
	})
	// #ifdef MP-WEIXIN
	const markers = computed(() => {
		return [{
			id: data.jobInfo.base_info.id,
			latitude: data.jobInfo.base_info.map_lat,
			longitude: data.jobInfo.base_info.map_lng,
			iconPath: '/static/home/marker.png',
			width: 50
		}]
	})
	// #endif
	onLoad(({
		id
	}) => {
		data.id = id
		getJobDetailInfo(id)
	})
	// 地图导航
	const openLocation = () => {
		uni.openLocation({
			latitude: Number(data.jobInfo.base_info.map_lat),
			longitude: Number(data.jobInfo.base_info.map_lng)
		});
	}
	// 投递简历弹框
	const isApplyClick = () => {
		if (data.jobInfo.has_apply == 1) return
		data.isApply = true
	}
	// 投递简历
	const submitResume = async () => {
		// 是否登录 未登录跳转登录页
		if (!isLogin.value) return uni.$u.route('/pages/login/login')
		if (data.jobInfo.has_apply != 1) {
			let params = {
				jobid: data.id
			}
			let res = await uni.$u.api.getJobApplyAdd(params)
			uni.$u.toast('投递成功')
			getJobDetailInfo(data.id)
		}
	}
	const imStartConfirm = async () => {
		uni.$u.route('pages/pagesPersonal/toolMall/package')
	}
	// 在线聊天
	const onlineChat = async () => {
		// 是否登录 未登录跳转登录页
		if (!isLogin.value) return uni.$u.route('/pages/login/login')
		try {
			uni.showLoading({

			})
			let params = {
				token: IM.imToken,
				jobid: data.id
			}
			let config = {
				custom: {
					catch: true
				}
			}
			let res = await uni.$u.api.startConversation(params, 2)
			let item = {
				jobname: data.jobInfo.base_info.jobname,
				detail: data.jobInfo.com_info.companyname,
				resumeid: 0,
				jobid: data.id,
				companyid: data.jobInfo.com_info.id,
				chat_id: res.chatid,
				relate_uid: data.jobInfo.base_info.uid
			}
			IM.setimChatid(res.chatid)
			if (res.next == '') {
				uni.hideLoading()
				uni.$u.route('pages/pagesMessage/detail', {
					item: decodeURIComponent(JSON.stringify(item))
				})
			}
		} catch (e) {
			uni.hideLoading()
			if (e.data.next == 'disabled') {
				uni.$u.toast(e.message)
			}
			if (e.data.next == 'complete_resume') {
				data.imStartConfirmText = '去完善简历'
				data.imStartContent = e.message
				data.imShowstart = true
			}
			if (e.data.next == 'bind_weixin') {
				uni.$u.route('pages/pagesPersonal/set/bindaccount/bindaccount')
			}
		}

	}
	// 收藏职位
	const collectClick = async () => {
		// 是否登录 未登录跳转登录页
		if (!isLogin.value) return uni.$u.route('/pages/login/login')
		let {
			has_fav
		} = data.jobInfo
		let params = {
			jobid: data.id
		}
		let config = {
			custom: {
				catch: true
			}
		}
		let res
		// // 1-收藏过 0-未收藏
		if (has_fav == 0) {
			try {
				res = await uni.$u.api.getFavJobAdd(params, config)
				data.jobInfo.has_fav = has_fav == 1 ? 0 : 1
			} catch (e) {}
		} else {
			res = await uni.$u.api.getFavJobCancel(params)
			data.jobInfo.has_fav = has_fav == 1 ? 0 : 1
		}
	}
	// 拨打电话
	const callPhone = (has_apply) => {
		// 是否登录 未登录跳转登录页
		if (!isLogin.value) return uni.$u.route('/pages/login/login')
		if (has_apply == 0) return uni.$u.toast('您还没有投递简历，请投递简历后拨打企业电话')
		uni.makePhoneCall({
			phoneNumber: data.jobInfo.contact_info.mobile
		});
	}
	// 分享
	const shareClick = async () => {
		try {
			let list = await uni.$u.api.getTplindexList()
			uni.showLoading()
			let params = {
				type: 'job',
				id: data.id,
				index: uni.$u.random(1, list.length)
			}
			let res = await uni.$u.api.getPosterGenerate({
				params
			})
			uni.hideLoading()
			data.isShare = true
			data.src = res
		} catch (e) {
			uni.hideLoading()
			uni.$u.toast('生成海报失败，请联系客服')
		}
	}
	// 去举报页面
	const toReport = (id) => {
		uni.$u.route('/pages/pagesHome/detailPages/report', {
			id
		})
	}
	// 去公司详情页
	const toCompanyDetail = (id, show = false) => {
		uni.$u.route('/pages/pagesHome/detailPages/company', {
			id,
			show
		})
	}
	// 去职位详情页
	const toJobDetail = (id) => {
		uni.$u.route('/pages/pagesHome/detailPages/job', {
			id
		})
	}
	// 获取职位详情信息
	const getJobDetailInfo = async (id) => {
		let params = {
			id
		}
		let res = await uni.$u.api.getJobDetailInfo({
			params
		})
		data.jobInfo = res
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #101010;

		&_main {
			padding: 0 30rpx;
			padding-bottom: 160rpx;

			&_tag {
				background-color: #f2f2f2;
				border-radius: 8rpx;
				margin-right: 20rpx;
				color: #867f7f;
				font-size: 24rpx;
				width: 196rpx;
				height: 84rpx;
				text-align: center;
				line-height: 84rpx;
			}

			&_contact {
				background-color: #f2f2f2;
				flex-direction: column;
				padding: 36rpx 0 20rpx 0;
				width: 640rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				color: #343434;
				font-size: 24rpx;
				border-radius: 10rpx;

				text {
					color: #00D075;
				}
			}

			&_ls {
				background-color: #fff;
				padding: 22rpx 0;
				margin-bottom: 20rpx;

				/* #ifdef MP-WEIXIN */
				:deep(u-line) {
					flex: none;
				}

				/* #endif */

				&--tit {
					color: #101010;
					font-size: 36rpx;
					font-weight: bold;
				}

				&--salary {
					color: #00D075;
					font-size: 28rpx;
				}

				&_item {
					color: #867F7F;
					font-size: 26rpx;
				}

				&--tags {
					flex-wrap: wrap;
					width: 80vw;

					view {
						background-color: #f2f2f2;
						color: #867F7F;
						font-size: 28rpx;
						margin-right: 20rpx;
						padding: 16rpx 12rpx;
						border-radius: 8rpx;
						margin-bottom: 24rpx;
					}
				}

				&--companyname {
					color: #101010;
					font-size: 28rpx;
				}

				&--refreshtime {
					color: #867F7F;
					font-size: 24rpx;
				}
			}
		}

		&_btm {
			background-color: #fff;
			width: 100vw;
			z-index: 999;
			position: fixed;
			bottom: 0;
			padding: 0 36rpx;
			/* #ifndef MP-WEIXIN */
			height: 114rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding-top: 36rpx;
			padding-bottom: env(safe-area-inset-bottom);

			/* #endif */
			&--phone {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}

			&--collect {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>